import React from 'react';
import {Card, Radio, Button, Space, Tag, Typography, Modal, Result, Empty} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import styles from '../style.less';
import { API } from '@/services/typings';

const {Text} = Typography;

interface AddressSelectionProps {
  addresses: API.ICustomerAddress[];
  selectedAddress?: API.ICustomerAddress ;
  onSelect: (address: API.ICustomerAddress) => void;
  onAddNew: () => void;
  showAddressSelection: boolean;
  onCancel: () => void;
  onOk: () => void;
}

const AddressSelection: React.FC<AddressSelectionProps> = ({
                                                             addresses,
                                                             selectedAddress,
                                                             onSelect,
                                                             onAddNew,
                                                             showAddressSelection = false,
                                                             onCancel,
                                                             onOk
                                                           }) => {
  return (
    <Modal
      open={showAddressSelection}
      onCancel={() => onCancel()}
      onOk={() => onOk()}
    >
      <Card
        title="收货地址"
        bordered={false}
        className={styles.addressCard}
        extra={
          <Button
            type="dashed"
            icon={<PlusOutlined/>}
            onClick={onAddNew}
            size="small"
          >
            新增地址
          </Button>
        }
      >
        {
          addresses?.length > 0 ? <Radio.Group
              value={selectedAddress?.id}
              onChange={(e) => {
                const address = addresses.find(a => a.id === e.target.value);
                if (address) onSelect(address);
              }}
              className={styles.addressGroup}
            >
              <Space direction="vertical" size={12} style={{width: '100%'}}>
                {addresses.map(address => (
                  <Radio.Button
                    key={address.id}
                    value={address.id}
                    className={styles.addressItem}
                  >
                    <div className={styles.addressContent}>
                      <div className={styles.addressHeader}>
                        <Text strong>{address.contactName}</Text>
                        <Text style={{margin: '0 8px'}}>{address.contactPhone}</Text>
                        {address.isDefault === '0' && (
                          <Tag color="orange">默认</Tag>
                        )}
                        {address.tags?.split(',').map((tag: any) => (
                          <Tag color={'blue'} key={tag}>{tag}</Tag>
                        ))}
                      </div>
                      <Text type="secondary" className={styles.addressText}>
                        {`${address.province}${address.city}${address.district}${address.detailedAddress}`}
                      </Text>
                    </div>
                  </Radio.Button>
                ))}
              </Space>
            </Radio.Group> :
            <Empty description="您还没有添加任何地址">
              <Button type="link" onClick={onAddNew}>立即添加</Button>
            </Empty>
        }

      </Card>
    </Modal>
  );
};

export default AddressSelection;
